<template>
  <div class="right-top">
    <div class="top-bar">
      <div class="top-bar__item" v-for="(item, index) in data.统计行" :key="index">
        <div class="bar-title">{{item.名称}}:</div>
        <div class="bar-value" :style="{color: item.颜色}">{{item.值}}</div>
        <div class="bar-unit">{{item.单位}}</div>
      </div>
    </div>

    <div class="top-main">
      <div class="main-wrap">
        <screen-list :data="data.列表" y-axis-title=""/>
      </div>
      <div class="main-wrap">
        <screen-pie :data="currPie" v-if="currPie"/>
      </div>

      <div>
        <div class="btns">
          <div class="btn" :class="{active: currKey===item}"
               v-for="(item, index) in keys"
               :key="index"
               @click="onClick(item)">{{item}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import screenList from '@/components/screen/com/screen-list'
import screenPie from '../com/screen-pie'

export default {
  name: 'right-top',
  cnName: '右上',
  components: {
    screenList,
    screenPie
  },
  props: {
    data: Object
  },
  data() {
    return {
      keys: [],
      currKey: '',
      currPie: null
    }
  },
  methods: {
    init() {
      const {饼图} = this.data
      const keys = []
      饼图.forEach(o => {
        keys.push(o.标题)
      })
      this.keys = keys
      this.onClick(keys[0])
    },
    onClick(key) {
      this.currKey = key
      const find = this.data.饼图.find(o => o.标题 === key)
      this.currPie = find.列表
    }
  },
  watch: {
    data() {
      this.init()
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="scss">
  .right-top {
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;

    .top-bar {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      &__item {
        display: flex;
      }


      .bar-value {
        margin-left: 5px;
        font-size: 20px;
      }
    }

    .top-main {
      flex: 1;
    }

    .main-wrap {
      height: 46%;
      box-sizing: border-box;
    }
  }

  .btns {
    display: flex;
    align-items: center;
    font-size: 13px;
    justify-content: center;
  }
  .btn {
    cursor: pointer;
    border: 1px solid #06f3ff;
    color: #FFF;
    background-color: rgba(11,135,207,.63);
    border-radius: 2px;
    padding: 1px 5px;

    &:hover, &:active, &.active {
      color: #000;
      background-color: #06f3ff;
    }

    & + & {
      margin-left: 10px;
    }
  }
</style>
